  <template>
  <div class="dashboard-container">
    <el-row sytle="height:400px">
      <el-card :key="key">
        <el-col :span="5" style="text-align: center">
          <img
            class="avatar"
            width="200"
            height="200"
            :src="baseUrl + `${avatar}`"
            alt="头像"
          />
          <h3 style="text-align: center">{{ name }}</h3>
          <el-upload
            drag
            :action="baseUrl + '/user/upload'"
            auto-upload
            name="avatar"
            :headers="{token}"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将头像拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传图片,且不超过500kb
            </div>
          </el-upload>
        </el-col>
        <el-col :span="10">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>通知公告</span>
              <el-button style="float: right; padding: 3px 0" type="text"
                >编辑</el-button
              >
            </div>
            <div class="text item">
              <ul>
                <li>
                  夜幕上的星星点点，是一颗颗纯洁晶莹的希望。在人生的奋斗中，不慎跌倒了并不表示永远的失败，惟有在跌倒后不畏失败坚韧不拔者，才是真正的勇者。
                  <el-divider></el-divider>
                </li>
                <li>
                  没有一个冬天不可逾越，没有一个春天不会来临。最慢的步伐不是跬步，而是徘徊，最快的脚步不是冲刺，而是坚持。
                  <el-divider></el-divider>
                </li>
                <li>
                  鸡蛋，从外打破是食物，从内打破是生命，人生也是如此，从外打破是压力，从内打破是成长
                  <el-divider></el-divider>
                </li>
              </ul>
            </div>
          </el-card>
        </el-col>
        <el-col :span="9" style="padding:5px">
          <el-calendar v-model="value"></el-calendar>
        </el-col>
      </el-card>
    </el-row>
  </div>
</template>

  <script>
import { mapGetters } from "vuex";
import { nanoid } from "nanoid";
export default {
  name: "Dashboard",
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      value: new Date(),
      key: ''
    };
  },
  computed: {
    ...mapGetters(["name","avatar","token"]),
  },
};
</script>

  <style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.avatar {
  text-align: center;
  border-radius:20px;
}
</style>
